<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="initiateTeam-box">
		<!-- 赛制填写 -->
		<view class="from-system">
			<view class="from-box">
				<view class="avatar-box flex-center">
					<up-upload :deletable="true" width="120rpx" height="120rpx" :fileList="fileList"
						@afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1">
						<view class="ava-upload flex-center">
							<up-icon name="account" color="#dedede" size="68rpx"></up-icon>
						</view>
					</up-upload>
					<text class="avatar-name" @click="deletePic">更换头像</text>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">昵称</text>
					<up-input border="none" maxlength="12" inputAlign="right" placeholderClass="placeholderClass" fontSize="26rpx"
						color="#DEDEDE" placeholder="请输入内容" v-model="userInfo.nickname"></up-input>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">性别</text>
					<view class="example-body flex-row-center">
						<up-radio-group size="28rpx" v-model="userInfo.gender" placement="row">
							<up-radio :customStyle="{marginBottom: '8rpx'}" labelColor="#DFDFDF" activeColor="#7CDEC7"
								v-for="(item, index) in radiolist" :key="index" :label="item.value" :name="item.name">
							</up-radio>
						</up-radio-group>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">生日</text>
					<view class="example-body flex-row-center" @click="datetimeStartShow=true">
						<up-input inputAlign="right" border="none" disabled placeholderClass="placeholderClass"
							fontSize="26rpx" color="#DEDEDE" placeholder="请选择生日" v-model="userInfo.birthday"></up-input>
						<up-icon name="arrow-right" color="#DEDEDE" size="28rpx"></up-icon>
					</view>
				</view>
				<view class="from-item flex-row-center">
					<text class="from-name">地区</text>
					<areaPickerVue :areaInfo="areaInfo" @confirmArea="confirmArea"></areaPickerVue>
				</view>
			</view>
		</view>
		<!-- 组队描述 -->
		<view class="from-system">
			<!-- style="margin-bottom: 32rpx	;" -->
			<text class="name">个人简介</text>
			<!-- 占位 -->
			<view style="height: 26rpx;"></view>
			<up-textarea border="none" placeholderClass="placeholderClass" v-model="userInfo.dio" placeholder="请输入个人简介"
				count></up-textarea>
		</view>
		<!-- 提交按钮 -->
		<view class="submit-box flex-center">
			<up-button text="确认修改" :loading="loadingStatus" loadingText="提交中" @click="submitInfo"
				:customStyle="{'color':'#115B56'}"
				color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)" shape="circle"></up-button>
		</view>
		<!-- 时间选择组件 -->
		<up-datetime-picker :minDate="1716967" :maxDate="timestamp" @cancel="datetimeStartShow=false"
			v-model="timestamp" :show="datetimeStartShow" @confirm="confirmbirthday" mode="date"></up-datetime-picker>
	</view>
</template>

<script setup>
	import {
		validateForm
	} from '@/utils/utools.js';
	import {
		formatDate
	} from '@/utils/utools.js';
	import {
		userInfoStore
	} from '../../stores/user';
	import areaPickerVue from '../../components/area/areaPicker.vue';
	const rules = {
		avatar: {
			required: true,
			msg: '请上传头像'
		},
		nickname: {
			required: true,
			msg: '请输入昵称'
		},
		gender: {
			required: true,
			msg: '请选择性别'
		},
		birthday: {
			required: true,
			msg: '请选择生日'
		},
		province: {
			required: true,
			msg: '请选择地区'
		}
	};
	const timestamp = (new Date()).valueOf();
	const userStore = userInfoStore();
	const oldUserInfo = computed(() => userStore.userInfo);
	const areaInfo = computed(() => {
		return {
			city: userStore.userInfo.city,
			province: userStore.userInfo.province,
			district: userStore.userInfo.district,
			area: userStore.userInfo.area,
		}
	});
	const userInfo = ref({
		...oldUserInfo.value,
	})
	// console.log('oldUserInfo', oldUserInfo.value);
	// console.log(' userInfo.value,', userInfo.value);
	// console.log('  userStore.userInfo.value,', userStore.userInfo);
	const fileList = ref(oldUserInfo.value?.avatar ? [{
		url: oldUserInfo.value?.avatar
	}] : [])

	// 删除图片
	const deletePic = (event) => {
		fileList.value = [];
	};
	const loadingStatus = ref(false);
	const datetimeStartShow = ref(false);

	const radiovalue = ref(null);

	// 基本案列数据
	const radiolist = reactive([{
			name: 1,
			value: '男',
			disabled: false,
		},
		{
			name: 2,
			value: '女',
			disabled: false,
		}
	]);
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		// console.log('event.file', event.file);
		fileList.value.push({
			...event.file,
			status: 'uploading',
			message: '上传中',
		})
		const result = await $Api.uploadFile.uploadFilePromise(fileList.value[0].url);
		console.log('result', result);
		if (result.code == '1') {
			fileList.value = [{
				status: 'success',
				message: '',
				url: result.data.fullurl,
			}];
		} else {
			fileList.value = [];
			uni.$u.toast(result.msg)
		}

	};

	const confirmbirthday = (e) => { //选择生日时间
		if (e.value) {
			userInfo.value.birthday = formatDate(e.value, 'yyyy-MM-dd');
			datetimeStartShow.value = false;
		}
	}
	const confirmArea = (area = {}) => { //确认选择省市区
		userInfo.value = {
			...userInfo.value,
			...area
		}
		console.log('confirmArea', userInfo.value);
	}
	const submitInfo = async () => { //确认修改
		if (loadingStatus.value) return
		// console.log('userInfo', userInfo.value);
		if (fileList.value.length == 0) {
			uni.$u.toast('请先上传头像');
			return
		}
		userInfo.value.avatar = fileList.value[0].url;
		const validate = validateForm(userInfo.value, rules); //验证
		if (!validate.status) return
		loadingStatus.value = true;
		const res = await $Api.user.registrationInfo({
			avatar: userInfo.value?.avatar,
			nickname: userInfo.value?.nickname,
			bio: userInfo.value?.bio,
			gender: userInfo.value?.gender,
			birthday: userInfo.value?.birthday,
			district: userInfo.value?.district,
			city: userInfo.value?.city,
			province: userInfo.value?.province
		})
		if (res.code == '1') {
			uni.showToast({
				title: '修改成功'
			})
			userStore.getUserInfo();
			setTimeout(() => {
				loadingStatus.value = true;
				uni.navigateBack()
			}, 600)
		} else {
			loadingStatus.value = false;
			uni.$u.toast(res.msg)
		}
	}
</script>
<style lang="scss">
	.u-radio-group--row {
		justify-content: flex-end;

		.u-radio {
			margin-left: 16rpx;
		}
	}

	.u-upload__wrap__preview__image {
		border-radius: 50%;
	}

	.placeholderClass {
		color: $placeholder-color !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	/* 直接对 <textarea> 元素设置样式 */
	textarea {
		color: #fff !important;
		/* 将字体颜色修改为深灰色 */
	}
</style>
<style lang="scss" scoped>
	.initiateTeam-box {
		padding: 20rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.from-system {
		padding: 40rpx 28rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 20rpx;
		background-color: #222528;
		margin-bottom: 32rpx;

		.name {
			font-weight: bold;
			font-size: 30rpx;
			color: #E2E3E3;

		}

		.marB {
			margin-bottom: 28rpx;
		}
	}

	.from-box {
		width: 100%;

		.avatar-box {
			flex-direction: column;
			margin-top: 60rpx;

			.ava-upload {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 2rpx solid #dedede;

			}

			.avatar-name {
				display: block;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 18rpx;
			}
		}

		.from-item {
			box-sizing: border-box;
			width: 100%;
			margin-top: 60rpx;
			justify-content: space-between;

			// &:not(:last-child) {
			// 	margin-top: 32rpx;
			// }

			.from-name {
				display: block;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 38rpx;
			}

			.up-textarea-box {
				color: #fff;
			}


		}



		.price-icon {
			font-weight: 500;
			font-size: 28rpx;
			color: #C2C3C4;
		}

		.minus-btn {
			width: 34rpx;
			height: 34rpx;
			background: #A7A8A9;
			border-radius: 4rpx;
		}

		.input-num {
			width: 64rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
		}

		.plus-btn {
			width: 34rpx;
			height: 34rpx;
			background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
			box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(108, 199, 190, 0.38);
			border-radius: 4rpx;
		}

		.example-body {
			flex: 1;
			justify-content: flex-end;

			.example-icon {
				font-size: 28rpx;
				color: #fff;
				margin: 0 24rpx;
			}
		}
	}

	.notice-box {
		flex-direction: column;
		margin-top: 16rpx;

		.name {
			font-weight: 500;
			font-size: 28rpx;
			color: #A2A3A4;
			line-height: 33rpx;
		}

		.details {
			font-weight: 500;
			font-size: 26rpx;
			color: #585A5C;
			line-height: 30rpx;
			margin-top: 8rpx;
		}
	}

	.submit-box {
		width: 336rpx;
		height: 84rpx;
		margin: 48rpx auto;
	}
</style>
<style>
	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}
</style>